import {PageContainer} from '@ant-design/pro-components';
import {message} from 'antd';
import React, {useEffect, useState} from 'react';
import {List} from 'antd';
import {listApiByPageUsingPOST} from "@/services/api/apiController";


const Index: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [list, setList] = useState<API.Api[]>([]);
  const [total, setTotal] = useState<number>(0);

  const loadData = async (current = 1, pageSize = 6) => {
    setLoading(true);
    try {
      const res = await listApiByPageUsingPOST({
        current,
        pageSize,
      });
      setList(res?.data?.records ?? []);
      setTotal(res?.data?.total ?? 0);
    } catch (e: any) {
      message.error("加载失败. " + e.message)
    }
    setLoading(false);
  }

  useEffect(() => {
    loadData();
  }, []);


  return (
    <PageContainer title='在线API开发平台'>
      <List
        className="api-list"
        loading={loading}
        itemLayout="horizontal"
        dataSource={list}
        renderItem={(item) => {
          const apiLink = `/api_info/${item.id}`;
          return (
            <List.Item
              actions={[<a key={item.id} href={apiLink}>查看</a>]}

              style={{
                backgroundColor: item.status === 0 ? 'rgba(200, 200, 200, 0.5)' : 'rgba(22, 119, 255, 0.1)',
              }}
            >
              <List.Item.Meta
                title={<a href={apiLink}>{item.name}</a>}
                description={item.description}
              />
            </List.Item>
          );
        }
        }
        bordered={true}
        pagination={{
          showTotal(total: number) {
            return '总数：' + total;
          },
          pageSize: 6,
          total,
          onChange(current, pageSize) {
            loadData(current, pageSize);
          }
        }
        }
      />
    </PageContainer>
  );
};

export default Index;
